import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsStyle from './ChartsScatter.less';

export default class ChartsScatter extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  };
  drawChart = () => {
  	//引入echaets,链接画布
  	let myChart = echarts.init(findDOMNode(this.refs.charts));
  	let option = {};
  	//处理图表数据
    let dataBJ = [
        [1,9,56,0.46,18,6,"良"],
        [2,115,21,0.65,34,9,"优"],
        [83,72,63,0.3,14,5,"良"],
        [34,78,29,0.33,16,6,"优"],
        [50,24,44,0.76,40,16,"优"],
        [6,258,90,1.77,68,33,"良"],
        [67,149,77,1.46,48,27,"良"],
        [8,55,180,1.29,59,29,"良"],
        [19,216,280,4.8,108,64,"重度污染"],
        [10,127,216,2.52,61,27,"中度污染"],
        [31,190,38,0.57,31,15,"优"],
        [42,121,40,0.43,21,7,"优"],
        [23,238,74,1.04,46,22,"良"],
        
    ];

    option = {
      title: {
        text: '正确率',
        left:'center',
        top: 'bottom',
        show:true,
      },
      tooltip: {
          trigger: 'axis',
          formatter:'<p style="background: #5e6166; color: #fff; padding: 5px;">{b1}</p><p style="padding: 5px;">{a0}:{c0}</p><p style="padding: 5px;">{a1}:{c1}%</p>',
          backgroundColor: '#ececec',
          axisPointer:{lineStyle:{opacity:0}},
          padding: 0,
          textStyle: {
            color: '#5e6166'
          }
        },
        xAxis: {
            type: 'value',
            nameGap: 16,
            nameTextStyle: {
                fontSize: 14
            },
            max: 100,
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle:{
                    color:['#fdfdfd','#f8f8f8','#f3f3f3','#eeeded','#e8e8e8']
                }
            },
            axisLabel: {
                formatter: '{value}%'
            }
        },
        yAxis: {
            type: 'value',
            name:'训练量占比(由少变多)',
            axisTick:{
              show:false,
            },
            axisLabel:{
              show:false
            },
            show:true,
        },
        visualMap: [
            {
                //数据维度，数组的index
                dimension: 1,
                show:false,
                calculable: true,
                inRange: {
                    symbolSize: [10, 70]
                },
            }
        ],
        series: [
            {
              name: '北京',
              type: 'scatter',
              data: dataBJ,
              itemStyle: {
                  normal: {
                      color: '#64dcdc',
                  }
              }
            }
        ]
    };
  	//绘制图表
  	myChart.setOption(option);

  };
  componentDidMount() {
  	//初始加载绘图
  	this.drawChart()
  };
  componentWillReceiveProps(nextProps) {
  	//数据变化画图
  	this.drawChart()
  }
  render() {
    return (
      <div ref = 'charts' className={ChartsStyle.chartScatter} ></div>
    );
  }
};
